<template>
	<view class="min-h-[100vh] bg-background">
		<view>
			<up-swiper :list="[banner, banner, banner]" height="100vw" indicatorActiveColor="#8C4F3D" indicatorInactiveColor="#C39A71" indicator></up-swiper>
			<view class="w-full h-[80rpx] bg-white flex items-center">
				<u-image :src="group" width="180rpx" height="80rpx"></u-image>
				<view class="flex items-center text-[24rpx] text-[#545567] ml-[24rpx]">
					<text>倒计时</text>
					<view class="flex items-center mx-[8rpx]">
						<view class="time mr-[4rpx]">9</view>
						<view class="time">9</view>
					</view>
					<text>天</text>
					<view class="flex items-center mx-[8rpx]">
						<view class="time mr-[4rpx]">9</view>
						<view class="time">9</view>
					</view>
					<text>时</text>
					<view class="flex items-center mx-[8rpx]">
						<view class="time mr-[4rpx]">9</view>
						<view class="time">9</view>
					</view>
					<text>分</text>
					<view class="flex items-center mx-[8rpx]">
						<view class="time !bg-second mr-[4rpx]">9</view>
						<view class="time !bg-second">9</view>
					</view>
					<text>秒</text>
				</view>
			</view>
			<up-notice-bar text="用户购买拼团产品，如满足设定人数限制，则折扣购买；未满足，钱款原路退回。"></up-notice-bar>
		</view>
		<view class="p-[20rpx]">
			<view class="bg-white rounded-[16rpx] p-[20rpx] relative">
				<view class="">
					<text class="text-[40rpx] text-[#FF0000] font-bold">￥7.98</text>
					<text class="text-[26rpx] text-gray line-through ml-[10rpx]">￥7.98</text>
				</view>
				<view class="flex justify-between items-center">
					<text class="font-bold text-[30rpx] tracking-[1px]">茉莉花香 拿铁双杯套餐</text>
					<text class="text-gray text-[24rpx]">售出 155</text>
				</view>
				<view class="line-clamp-2 tracking-[1px] text-[24rpx] text-gray">巴拿马翡翠庄园红标瑰夏日晒水洗挂耳黑咖啡粉手冲高端...</view>
				<view class="bg-[#F7F8FA] mt-[20rpx] rounded-[12rpx] grid grid-cols-4">
					<view class="px-[24rpx] py-[16rpx]" v-for="item in 4" :key="item">
						<view class="text-[26rpx]">冷藏</view>
						<view class="text-[22rpx] text-gray">储存条件</view>
					</view>
				</view>
				<button class="absolute top-[20rpx] right-[20rpx] u-reset-button" open-type="share">
					<up-image :src="share" width="48rpx" height="48rpx"></up-image>
				</button>
			</view>
			<view class="mt-[20rpx]">
				<up-image :src="banner" width="100%" height="160rpx" radius="16rpx"></up-image>
			</view>
		</view>
		<view class="mt-[20rpx]">
			<up-parse content=""></up-parse>
		</view>
		<view class="p-[20rpx]">
			<view class="bg-white rounded-[16rpx]">
				<view class="px-[20rpx] py-[24rpx] flex items-center justify-between border-b border-background">
					<view class="text-[30rpx]">评价(15)</view>
					<view class="flex items-center leading-none" @click="toComment">
						<view class="text-[28rpx] gradation">查看全部</view>
						<up-icon name="arrow-right" color="#333" size="32rpx"></up-icon>
					</view>
				</view>
				<view class="">
					<view class="pl-[20rpx]">
						<view class="p-[20rpx] pl-0 border-b border-background" v-for="item in 10" :key="item">
							<view class="flex items-center">
								<up-avatar src="" size="80rpx"></up-avatar>
								<view class="ml-[16rpx]">
									<view class="text-gray text-[26rpx] mb-[10rpx]">用户昵称</view>
									<up-rate count="5" size="36rpx" gutter="16rpx"></up-rate>
								</view>
							</view>
							<view class="pl-[96rpx]">
								<view class="text-[26rpx] my-[16rpx]">评论内容</view>
								<up-album :urls="[banner, banner, banner]" multipleSize="176rpx" :rowCount="3" space="24rpx"></up-album>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import banner from '@/static/banner.png';
import group from '@/static/group.png';
import share from '@/static/share.png';
const toComment = () => {
	uni.navigateTo({
		url: '/pages/comment/comment'
	});
};
</script>

<style scoped lang="scss">
.gradation {
	background: linear-gradient(90deg, #ff0060 0%, #ff223e 32%, #fe4e1d 72%, #ff6400 100%);
	-webkit-background-clip: text;
	color: transparent;
}
.time {
	width: 32rpx;
	height: 40rpx;
	background: #545567;
	border-radius: 4rpx;
	font-weight: bold;
	font-size: 30rpx;
	color: #ffffff;
	text-align: center;
	line-height: 40rpx;
}
</style>